<template>
	<view class='content'>
		<view style='height: 10px;'>
			
		</view>
		<view class="top">
			<view class="left">
				<view class="left_cont">
					<u-avatar :src="userInfo.head_img" size='55'></u-avatar>
					<view class="userInfo">
						<view class="name">
							{{ userInfo.username}}
						</view>
						<view class="mobile">
							手机号:{{ userInfo.mobile}}
						</view>
					</view>
					
				</view>
				<view class="cont">
					<view class="mobile">
						<view class="">
							个人累计环保金
						</view>
						<view class='num'>
							{{ userInfo.money}}
						</view>
					</view>
					<view class="mobile">
						<view class="">
							总环保金
						</view>
						<view class='num'>
							{{ userInfo.moneyHe}}
						</view>
					</view>
					<view class="mobile">
						<view class="">
							成员人数
						</view>
						<view class='num'>
							{{ userInfo.numHe}}
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<u-image  class='right' width="80px" height="80px" :src="userInfo.img" @click='Image'></u-image>
				<u-button size="small" type="success" icon='plus' text="新增成员" @click='Image'></u-button>
			</view>
		</view>
		
		
		<view class="name_title">
			家庭成员列表
		</view>
		
		<view class="family_list">
			<view class="family_item" v-for="(item,index) in userInfo.son" :key="index">
				<view class="top">
					<view class="left">
						<view class="left_cont">
							<u-avatar :src="item.head_img" size='35'></u-avatar>
							<view class="name">
								{{ item.username }}
							</view>
						</view>
						<view class="mobile">
							手机号：{{ item.mobile}}
						</view>
						<view class="cont">
							<view class="mobile">
								贡献环保金: {{ item.money}}
							</view>
						</view>
						
					</view>
					<view class="">
						<view class="status red ">
							子账户
						</view>
						<u-button type="error" size="small" text="解除绑定" @click='removebind(item)'></u-button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" mode='center'closeable @close="close" @open="open">
			<view class='propImg'>
				<u-image  class='right' width="240px" height="240px" :src="userInfo.img" @click='Image'></u-image>
				<view class="right">
					我的二维码
				</view>
			</view>
		</u-popup>
		
		<u-modal :show="showModal" title="提示" show-cancel-button cancel-text="否" confirmText='是' @cancel="showModal = false" @confirm="confirmBind">
			<view class="slot-content">
				<view class="">
					您的账户环保金将被清零，确认要解除关系？
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				show: false,
				showModal: false,
				sonInfo: {}
			}
		},
		onLoad() {
			this.getFamily()
		},
		methods: {
			Image(){
				this.show = true
			},
			open(){},
			close(){
				this.show = false
			},
			removebind(item){
				this.showModal= true
				this.sonInfo = item
			},
			confirmBind(){
				var _this = this
				this.fq_post('wxsite/User/unbound', {
					main_id: _this.userInfo.user_id,
					son_id: _this.sonInfo.user_id,
					status: 2
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						_this.getFamily()
						_this.showModal = false
					}
				})
				// uni.request({
				// 	url: 'http://www.yndzfl.cn/wxsite/User/unbound',
				// 	method: 'POST',
				// 	header:{
				// 		"Content-Type" : "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		openid: uni.getStorageSync('OPENID'),
				// 		main_id: _this.userInfo.user_id,
				// 		son_id: _this.sonInfo.user_id,
				// 		status: 2
				// 	},
				// 	success(res) {
				// 		if(res.data.code == 1){
				// 			uni.showToast({
				// 				title: res.data.msg,
				// 				icon: 'none'
				// 			})
				// 			_this.getFamily()
				// 			_this.showModal = false
				// 		}
						
				// 	}
				// })
			},
			getFamily(){
				
				var _this = this
				this.fq_post('wxsite/User/memberOfFamily', {
					
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						_this.userInfo = res.data
					}
				})
				// uni.request({
				// 	url: 'http://www.yndzfl.cn/wxsite/User/memberOfFamily',
				// 	method: 'POST',
				// 	header:{
				// 		"Content-Type" : "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		openid: uni.getStorageSync('OPENID')
				// 	},
				// 	success(res) {
				// 		if(res.data.code == 1){
				// 			_this.userInfo = res.data.data
				// 		}
						
				// 	}
				// })
			},
		}
	}
</script>

<style scoped>
.top{
	display: flex;
	background-color: #fff;
	padding: 10px;
	align-items: center;
	justify-content: space-between;
}
.left_cont{
	display: flex;
	align-items: center;
}
.userInfo{
	margin-left: 10px;
}
.mobile{
	color: #999;
	margin-top: 5px;
	font-size: 14px;
}
.cont{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cont .mobile{
	color: #333;
	margin-left: 5px;
}
.num{
	text-align: center;
}
.name_title{
	font-size: 15px;
	padding: 10px;
	font-weight: bold;
}
.name{
	margin-left: 10px;
}
.status{
	text-align: center;
	margin-bottom: 10px;
}
.right{
	text-align: center;
}
.propImg{
	padding: 20px;
}

</style>
